<%@page import="javax.sql.rowset.WebRowSet"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>前台页面</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="receptionStyle1.css" />
<%
String receptionist_name = request.getParameter("customer_name");
String restaurant_name = request.getParameter("restaurant_name");
System.out.print(restaurant_name);
%>
<style>
    /* 定义容器样式，用于包含两个框 */
    .container {
	display: flex; /* 使用弹性盒模型布局 */
    flex-wrap: wrap; /* 允许项目换行 */
    gap: 10px; /* 设置框之间的间隔 */
    }
    
    .box {
    flex: 1 0 25%; /* 允许项目根据可用空间伸缩，同时设置最小宽度 */
    /* max-width: 25%; 设置最大宽度，防止项目超出容器 */
    /* 其他样式保持不变 */
}

 h6 {
    color: #333; /* 字体颜色 */
    font-size: 1.0em; /* 字体大小 */
    margin: 0.5em 0; /* 外边距 */
  }

  /* 通过ID选择器指定特定标题的样式 */
  #ta1 {
    font-weight: bold; /* 字体加粗 */
  }

  #ta2 {
    color: #007bff; /* 字体颜色 */
  }

  #ta3 {
    font-style: italic; /* 字体风格 */
  }


    .box.zero {
         width: 100%; /* 设置框的宽度 */
        height:100%; /* 设置框的高度 */
        padding: 20px; /* 设置内边距 */
        border: 1px solid #000000; /* 设置边框宽度、样式和颜色 */
        background-color: #ffffff; /* 设置背景颜色 */
        box-sizing: border-box; /* 确保padding不会增加总宽度 */   
    }

    .box.first {
         width: 100%; /* 设置框的宽度 */
        height: 30%; /* 设置框的高度 */
        padding: 20px; /* 设置内边距 */
        border: 1px solid #000000; /* 设置边框宽度、样式和颜色 */
        background-color: #ffffff; /* 设置背景颜色 */
        box-sizing: border-box; /* 确保padding不会增加总宽度 */   
    }

    
    .box.second {
        width:  100%; /* 设置框的宽度 */
        height: 70%; /* 设置框的高度 */
        padding: 20px; /* 设置内边距 */
        border: 1px solid #000000; /* 设置边框宽度、样式和颜色 */
        background-color: #ffffff; /* 设置背景颜色 */
        box-sizing: border-box; /* 确保padding不会增加总宽度 */
    }

    /* 公共边的样式，确保公共边看起来连在一起 */
    .shared-border {
        border-top: 1px solid #000000; /* 设置上边框 */
        border-bottom: 1px solid #000000; /* 设置下边框 */
    }
    
            .button {
            display: inline-block;
            padding: 10px 20px;
            margin: 10px;
            font-size: 16px;
            color: #fff;
            background-color: #663399;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            cursor: pointer;
        }
        .button:hover {
            background-color: grey;
        }
</style>
</head>
<body>
<header>

      <div class="nav">
			<ul>
				<li><a href="#"><%=restaurant_name %>餐馆</a></li>
				<li><a href="../cooker/kitchenIndex.jsp?restaurant_name=<%=restaurant_name%>&customer_name=<%=receptionist_name %>">后厨状态</a></li>
				<li><a href="myOrders.jsp?restaurant_name=<%=restaurant_name%>&customer_name=<%=receptionist_name %>">全部订单</a></li>
				<li><a href="../cooker/manageMeal.jsp?restaurant_name=<%=restaurant_name%>&customer_name=<%=receptionist_name %>">菜品管理</a></li>
				<li><a href="getSum.jsp?restaurant_name=<%=restaurant_name%>&customer_name=<%=receptionist_name %>">营业额统计</a></li>
				<li><a href="#">当前用户:<%=receptionist_name %></a></li>
			</ul>
		</div>
</header>
<div class="container">
<%
    Connection conn = null;
    Statement stmt = null;
    ResultSet rs = null;
    try {
      Class.forName("org.mariadb.jdbc.Driver"); // 加载驱动
      conn = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
      stmt = conn.createStatement();
      String sql ="SELECT * FROM `table`";
      rs = stmt.executeQuery(sql);

      while(rs.next()) {
        String table_num = rs.getString("num");//桌号
%>
        <div class="box zero shared-border">
            <div class="box first shared-border">
                <p>桌号:<%=table_num %></p>
            </div>
            <div class="box second shared-border">
                <%
                    Connection conn2 = null;
                    Statement stmt2 = null;
                    ResultSet rs2 = null;
                    
                    try {
                        conn2 = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
                        stmt2 = conn2.createStatement();
                        String sql2 ="SELECT * FROM customers c ,dish d ,`table` t WHERE c.table_num = "+table_num+" AND c.order_num = d.order_num AND c.res = '"+restaurant_name+"' AND t.num = c.table_num AND t.state = '已预订' ;";
                        rs2 = stmt2.executeQuery(sql2);

                        while(rs2.next()) {
                            String meal = rs2.getString("meal");//菜名
                            String num = rs2.getString("num");//数量
                            String order_num = rs2.getString("order_num");//数量
                            String state = rs2.getString("state");//状态
                %>
                            <h6 id ='ta1'>订单号: <%=order_num %> | 状态:<%=state %></h6>
                            <h6 id ='ta2'>菜名: <%=meal %></h6>
                            <h6 id ='ta3'>数量: <%=num %></h6>
                            <hr/>
                <%
                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                    } finally {
                        // 关闭资源
                        try { if (rs2 != null) rs2.close(); } catch (SQLException ignored) {}
                        try { if (stmt2 != null) stmt2.close(); } catch (SQLException ignored) {}
                        try { if (conn2 != null) conn2.close(); } catch (SQLException ignored) {}
                    }
                %>
            </div>
            <a href='cleanDesk.jsp?restaurant_name=<%=restaurant_name%>&customer_name=<%=receptionist_name %>&table_num=<%=table_num%>' class="button">清理桌子</a>
        </div>
<%
      }
    } catch (SQLException | ClassNotFoundException e) {
      e.printStackTrace();
    } finally {
      // 关闭资源
      try { if (rs != null) rs.close(); } catch (SQLException ignored) {}
      try { if (stmt != null) stmt.close(); } catch (SQLException ignored) {}
      try { if (conn != null) conn.close(); } catch (SQLException ignored) {}
    }
  %>
</div>
</body>
</html>